<template>
  <u-popup :show="skuVisble" @close="close" @open="open" closeable>
    <view class="sku_info">
      <view style="display: flex">
        <image :src="skuSelected.image" class="sku_image" @click="openImagePreview"></image>
        <view style="display: flex; flex-direction: column">
          <text class="goods_name">{{ skuSelected.name }}</text>
          <view style="display: flex; align-items: flex-end">
            <view class="price">{{ skuSelected.presentPrice }}</view>
            <view class="original_price">{{ skuSelected.originalPrice }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="sku_option">
      <text>规格</text>
      <view style="display: flex; margin-top: 10rpx; width: 100%; overflow: scroll">
        <view
          v-for="(item, index) in detailInfo.skuList"
          :key="index"
          @click="selectSku(item)"
          :class="[skuSelected.id == item.id ? 'sku_selected' : 'sku_cu', 'sku_item']"
        >
          {{ item.name }}
        </view>
      </view>
      <!-- <view class="sku_num">
        数量
        <u-number-box v-model="submitInfo.num"></u-number-box>
      </view> -->

      <view class="buy_option" v-if="!props.hadTar">
        <!-- <view class="sku_buy" style="background-color: #f9ae3d" @click="inCart">加入购物车</view> -->
        <view class="sku_buy" @click="realBuy">立即购买</view>
      </view>
      <view v-else :style="{ paddingBottom: props.hadTar ? '120rpx' : '30rpx' }">
        <view class="sku_buy" style="background-color: #f9ae3d; width: 95%" @click="inCartById">确认</view>
      </view>
    </view>
  </u-popup>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";

const props = defineProps({
  // 列表内容
  skuVisble: {
    type: Boolean,
    default: () => false,
  },
  detailInfo: {
    type: Object,
    default: () => {},
  },
  hadTar: {
    type: Boolean,
    default: () => false,
  },
});

watch(
  () => props.skuVisble,
  (val) => {
    skuVisble.value = val;
    if (val) {
      Object.assign(detailInfo, props.detailInfo);
      skuSelected.value = detailInfo.skuList[0];
    }
  }
);
const skuVisble = ref();
const skuSelected = ref({});
const submitInfo = reactive({
  num: 1,
});
const detailInfo = reactive({});

function openImagePreview() {
  uni.previewImage({
    urls: [skuSelected.value.image],
  });
}

function selectSku(skuItem) {
  skuSelected.value = skuItem;
}

function realBuy() {
  if (!uni.getStorageSync("openId")) {
    uni.showModal({
      title: "提示",
      content: "功能将被受限，点击按钮授权 ",
      showCancel: true,
      confirmText: "授权",
      success: ({ confirm, cancel }) => {
        if (confirm) {
          uni.navigateTo({
            url: "/pages/auth/index",
          });
        }
        if (cancel) {
          uni.navigateBack({ delta: 1 });
        }
      },
    });
  } else {
    let par = [makeGoodsInfo()];

    uni.navigateTo({
      url: "/pages/goodsDetail/orderConfirm?info=" + encodeURIComponent(JSON.stringify(par)),
    });
  }
}

function inCartById() {
  emit("inCartById", makeGoodsInfo());
}

function inCart() {
  let goodsInfo = makeGoodsInfo();

  let cartGoodsInfo = uni.getStorageSync("cartGoodsInfo");
  if (!cartGoodsInfo) {
    cartGoodsInfo = [];
  }

  cartGoodsInfo.push(goodsInfo);
  uni.setStorageSync("cartGoodsInfo", cartGoodsInfo);

  uni.showToast({
    title: "加入购物车成功",
  });
}

//定制去订单确认页的对象
function makeGoodsInfo() {
  let par = {
    goodsName: props.detailInfo.name,
    skuName: skuSelected.value.name,
    num: submitInfo.num,
    skuPresentPrice: skuSelected.value.presentPrice,
    skuOriginalPrice: skuSelected.value.originalPrice,
    skuImage: skuSelected.value.image,
    baseFreight: props.detailInfo.baseFreight, //基础运费
    additionalFreight: props.detailInfo.additionalFreight, //附加运费
    specialArea: props.detailInfo.specialArea, //特殊地区
    freightId: props.detailInfo.freightId, //特殊地区
    goodsId: props.detailInfo.id, //特殊地区
    skuId: skuSelected.value.id,
    goodsImage: props.detailInfo.mainImage[0],
  };
  return par;
}

const emit = defineEmits(["handleClose", "inCartById"]);

function close() {
  skuVisble.value = false;
  emit("handleClose");
}
</script>

<style lang="scss" scoped>
.bottom_icons {
  font-size: 22rpx;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.sku_info {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
}

.sku_image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.sku_option {
  padding: 30rpx;
}

.sku_item {
  min-width: 100rpx;
  max-width: 200rpx;
  height: 60rpx;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
  font-size: 24rpx;
  white-space: nowrap;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 10rpx;
  padding-right: 10rpx;
  line-height: 60rpx;
}

.sku_cu {
  border: 1px solid #ccc;
  border-radius: 10rpx;
  color: #969696;
  background-color: rgba($color: #cccccc, $alpha: 0.1);
}
.sku_selected {
  border: 1px solid #d23000;
  border-radius: 10rpx;
  color: #d23000;
  background-color: rgba($color: #d23000, $alpha: 0.1);
}

.sku_num {
  display: flex;
  justify-content: space-between;
  margin-top: 70rpx;
  align-items: center;
  padding-bottom: 300rpx;
}

.buy_option {
  display: flex;
}

.sku_buy {
  width: 95%;
  height: 80rpx;
  display: flex;
  background-color: red;
  border-radius: 100rpx;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 30rpx;
  font-weight: 600;
  margin-top: 80rpx;
  margin-left: 20rpx;
}

.price {
  font-size: 48rpx;
  color: #d23000;
  font-weight: 600;
}
.original_price {
  color: #b5b5b5;
  font-weight: 400;
  font-size: 28rpx;
  margin-left: 4px;
  text-decoration: line-through;
  margin-bottom: 5rpx;
}
</style>
